<template>
  <main class="type-page">
    <div class="type">
      <button
        v-for="item in typeList"
        :key="item"
        :class="type === item ? 'action-red' : ''"
        @click="typeHandle(item)"
      >
        {{ item }}
      </button>
    </div>

    <Happy8
      v-if="type === '快乐8'"
      ref="happy8Ref"
      :confirmVisible="confirmVisible"
      @openMusic="confirm"
      @close="closeConfirm"
    />
    <UnionLotto v-if="type === '双色球'" />
    <SuperLotto v-if="type === '大乐透'" />

    <audio ref="musicAudio" loop>
      <source src="../assets/双手插兜.mp3" type="audio/mpeg" />
      Your browser does not support the audio element.
    </audio>
  </main>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Happy8 from '../components/Happy8.vue'
import Confirm from '../components/Confirm.vue'
import UnionLotto from '@/components/UnionLotto.vue'
import SuperLotto from '@/components/SuperLotto.vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const musicAudio = ref()
const happy8Ref = ref() // 添加 Happy8 组件的 ref

const typeList = ref(['快乐8', '双色球', '大乐透'])
const type = ref('快乐8')
const confirmVisible = ref(true) // 每次页面加载都显示弹窗

function typeHandle(value) {
  type.value = value
  // 如果切换到快乐8，延迟一下让组件挂载后获取数据
  if (value === '快乐8') {
    setTimeout(() => {
      // 通过 ref 调用 Happy8 组件的方法
      if (happy8Ref.value) {
        happy8Ref.value.refreshData && happy8Ref.value.refreshData()
      }
    }, 100)
  }
}

// 播放音乐
function confirm() {
  musicAudio.value.play()
  confirmVisible.value = false
}

// 关闭弹窗
function closeConfirm() {
  confirmVisible.value = false
}

onMounted(() => {
  // 每次页面加载都显示弹窗
  confirmVisible.value = true
})
</script>

<style scoped>
@import '../assets/index.css';
.type-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 568px;
  margin: 0 auto;
  /* padding: 20px; */
  font-family: '微软雅黑';
  text-align: center;
  color: #000;
}
.type {
  padding: 18px 6px 0 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.type button {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 16%;
  justify-content: center;
  align-items: center;
  padding: 6px 6px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
</style>
